<template>
  <div :class="[mode !== 2 ? 'cloud' : '']" :id="id"></div>
</template>

<script>
import register from "@/js/main/register.js";
export default {
  props: {
    element: {
      type: Object,
    },
    id: {
      type: String,
    },
    mode: {
      type: Number,
    },
  },
  data() {
    return {
      window: window,
      airCityPlayer: null,
      airCityApi: null,
      locked: false,
      instanceNodeId: null,
      redeayObject: null,
      isReady: false,
    };
  },
  created() {
    register.addComponent(this);
  },
  mounted() {
    this.$nextTick(() => {
      console.log("[ this.element.data ] >", this.element.data);
      this.showAirCityExplorer(this.element.data);
    });
  },
  destroyed() {
    register.removeComponent(this);
    if (this.airCityApi) {
      this.airCityApi.destroy();
    }
  },
  methods: {
    redraw() {},
    onAirCityReady() {
      this.locked = false;
      this.isReady = true;
      if (this.redeayObject) {
        this.redeayObject();
      }
      this.getCamera();
    },
    onAirCityEvent(a, b, c) {},
    onAirCityLog(a) {},
    onAirCityApiVersion(a, b) {},
    showAirCityExplorer(row) {
      if (row.nodeIP && row.playerPort) {
        if (this.locked == false) {
          this.locked = true;
          let viewid = row.viewid;
          let id = row.id;
          let apiOptions = {
            onReady: this.onAirCityReady,
            onApiVersion: this.onAirCityApiVersion,
            onEvent: this.onAirCityEvent,
            onLog: this.onAirCityLog,
            useColorLog: false,
          };
          let options = {
            iid: id,
            domId: this.id,
            apiOptions: apiOptions,
            showMarker: false,
            showStartupInfo: false,
          };
          this.redeayObject = async function () {
            if (viewid != -1 || viewid === 0) {
              await this.stopAnimation();
              this.airCityApi.camera.playAnimation(viewid);
            }
          };
          if (this.airCityPlayer) {
            if (this.instanceNodeId !== row.id) {
              this.airCityPlayer.setInstanceOptions(options);
            } else {
              if (this.redeayObject) {
                this.redeayObject();
              }
              this.locked = false;
            }
          } else {
            let url = this.element.data.url.replace("ws://", "").split(":")[0];
            this.airCityPlayer = new AirCityPlayer(
              url + ":" + row.playerPort,
              options
            );
            this.airCityApi = this.airCityPlayer.getAPI();
          }
          this.instanceNodeId = id;
        }
      }
    },
    async stopAnimation() {
      await this.airCityApi.camera.stopAnimation();
    },
    async getCamera() {
      let data = await this.airCityApi.camera.get();
      this.element.data.camera = data.camera;
    },
    setCamera(camera) {
      this.airCityApi.camera.set(camera);
    },
  },
};
</script>
<style lang="scss" scoped>
.cloud {
  background: #1a1f32cc;
  background-image: url("../../image/main/map_high.svg");
  background-size: 100% 100%;
}
</style>
